<template>
    <div>
        <div class="banner" @click="hideSwiper">
            <div class="banner-img">
                <img src="//img1.qunarzz.com/sight/p0/2008/b9/b9cc3ab2fbe4f0e7a3.water.jpg_600x330_41191030.jpg" alt="">
            </div>

            <div class="banner-title">
                上海海昌海洋公园(AAAA景区)
            </div>
        </div>


          <div class="img-swiper" v-show="imgSwiper" @click="hideSwiper">
               <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide :key="banner.id" v-for="banner in bannerList">
                        <img :src="banner.imgUrl" />
                    </swiper-slide>

                    
                    <!-- <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div> -->
                </swiper>
                <div class="swiper-pagination" slot="pagination"></div>
          </div>
    </div>
 
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
    components: {
    swiper,
    swiperSlide,
  },
    data(){
        return {
            swiperOption:{
                 loop: true,
                 pagination: {
                    el: '.swiper-pagination',
                    type: 'fraction',
                },
            },
            
            imgSwiper:false,
            bannerList:[
                {
                    id:"01",
                    imgUrl:"http://img1.qunarzz.com/sight/p0/2008/e5/e5c01dfca72bc4dda3.water.jpg_r_800x800_3bb9d82e.jpg"
                },
                {
                    id:"02",
                    imgUrl:"http://img1.qunarzz.com/sight/p0/2008/66/6670f95c09cff3a5a3.water.jpg_r_800x800_47f5293a.jpg"
                },
                {
                    id:"03",
                    imgUrl:"http://img1.qunarzz.com/sight/p0/2008/1e/1e0e07849790d432a3.water.jpg_350x240_4ede6ce0.jpg"
                }
            ]
        }
        
    },
    methods:{
        hideSwiper(){
           this.imgSwiper=!this.imgSwiper
        }
    }
}
</script>

<style scoped>
.banner{
    position: relative;
}
.banner .banner-img{
    width: 100%;
    height: 0px;
    overflow: hidden;
    padding-bottom: 55%;
}
.banner .banner-img img{
    width: 100%;
}
.banner .banner-title{
    font-size:.36rem;
    color: #fff;
    position: absolute;
    bottom: .36rem;
    left: .2rem;
}
.img-swiper{
    position: fixed;
    width: 100%;
    background-color: black;
    top: 0px;
    bottom: 0px;
    display: flex;
   justify-content: center;
   align-items: center;
}
.img-swiper img{
    width: 100%;
 }
 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
     /* font-size:17px;
     color:#fff; 
     bottom:.6rem" */
     font-size: 17px;
     color: #fff;
     bottom: .6rem;
     
 }
</style>